<template>
  <div class="flex">
    <div class="drag-upload">
      <a-upload-dragger
        :file-list="fileList"
        listType="picture"
        accept="image/*"
        multiple
        action="http://api.vgood365.com/api/admin/base/static/uploadPicture"
        @change="handleChange"
        @preview="handlePreview"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击或拖动图片到此区域以上载</p>
        <p class="ant-upload-hint">支持单个或批量上传图片</p>
      </a-upload-dragger>
    </div>
    <div v-if="imgUrl">
      <div class="img-warp">
        <img class="img" :src="imgUrl" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      imgUrl: '',
    };
  },
  methods: {
    handleChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.map((file) => {
        if (file.response && file.response.code !== 200) file.status = 'error';
        return file;
      });

      this.fileList = fileList;
    },
    handlePreview(info) {
      if (info.response && info.response.data)
        this.imgUrl = info.response.data.replace('-prod', '-dev')
    },
  },
};
</script>

<style lang="less" scoped>
.drag-upload {
  width: 600px;
  height: 400px;

  /deep/ .ant-upload-list-item-card-actions.picture {
    display: none;
  }
}

.img-warp {
  background: #0e0e0e;
  padding: 20px;
  box-sizing: border-box;
  max-width: 600px;
  margin-left: 10px;

  .img {
    width: 100%;
  }
}

.flex {
  display: flex;
}
</style>
